<template>
    <div class="he">
        <div class="left">
            <div class="avatar">
                <img :src="heUser.avatar">
            </div>
        </div>
        <div class="right">
            <!-- <div class="top">
                <span class="name">{{name}}</span>
            </div> -->
            <div class="bottom">
                <div class="text" v-if="msg.msg_type==1">{{msg.msg}}</div>
                <div class="image" v-if="msg.msg_type==2">
                    <img :src="msg.msg">
                </div>
                <div class="map" v-if="msg.msg_type == 3">
                    <img src="./map.png">
                    <div class="info">
                        <h3 class="title">位置</h3>
                        <p class="address">{{msg.msg}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ChatHe',
    props: {
        msg: {
            type: Object
        },
        heUser: {
            type: Object
        }
    },
    computed: {
        avatar() {
            return this.$store.state.heUser.avatar
        },
        name() {
            return this.$store.state.heUser.nickname
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/theme.scss';
.he{
    display: flex;
    padding:0.3125rem 0;
    .left{
        .avatar{
            width:2.8125rem;
            height:2.8125rem;
            border-radius:100%;
            overflow: hidden;
            img{
                width:100%;
                height:100%;
                display:block;
            }
        }
    }
    .right{
        margin-left:0.9375rem;
        .top{
            text-align: left;
            .name{
                font-size:0.875rem;
                @include font_color("font_color4");
            }
        }
        .bottom{
            margin-top:0.3125rem;
            .text{
                min-width:10vw;
                padding:0.5rem;
                font-size:1rem;
                border-radius:0.625rem;
                max-width:60vw;
                @include background_color("background_color1");
                @include font_color("font_color2");
            }
            .image{
                max-width:35vw;
                font-size:1rem;
                border-radius:0.625rem;
                overflow: hidden;
                img{
                    width:100%;
                    height:100%;
                    display: block;
                }
            }
            .map{
                max-width:60vw;
                border-radius:0.625rem;
                overflow: hidden;
                @include background_color('background_color1');
                img{
                    width:120%;
                    margin-left:-10%;
                    display: block;
                    height:100px;
                    object-fit: cover;
                }
                .info{
                    padding:5px;
                    .title{
                        font-size:16px;
                        margin-bottom:5px;
                        @include font_color('font_color2');
                    }
                    .address{
                        width:100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size:14px;
                        @include font_color('font_color2');
                    }
                }
            }
        }
    }
}
</style>